<template>
  <view class="search">
    <view class="content">
      <view class="select"> 搜产业 </view>
      <view
        class="content-box"
        :class="{ center: mode === 2 }"
        @click.self="getFocus"
      >
        <input
          class="input u-m-l-10"
          :class="{ center: !active && mode === 2 }"
          :focus="isFocus"
          :placeholder="placeholder"
          v-model="inputVal"
          @focus="focus"
          @blur="blur"
          @confirm="search"
        />
        <u-icon name="search" color="#808080" size="30"></u-icon>
        <!-- 	<u-icon v-if="isDelShow" @click="clear" name="close-circle-fill" color="#b4b4b4" size="35"></u-icon> -->
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'fa-search',
  props: {
    mode: {
      type: Number,
      default: 1
    },
    radius: {
      type: String,
      default: '60'
    },
    placeholder: {
      type: String,
      default: '请输入关键词搜索'
    },
    custom: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      active: false,
      inputVal: '',
      isDelShow: false,
      isFocus: false,

    }

  },
  watch: {
    inputVal (newVal) {
      if (newVal) {
        this.isDelShow = true
      } else {
        this.isDelShow = false
      }
    }
  },
  methods: {
    focus () {
      this.active = true
    },
    blur () {
      this.isFocus = false
      if (!this.inputVal) {
        this.active = false
      }
    },
    clear () {
      this.inputVal = ''
      this.active = false
    },
    getFocus () {
      this.isFocus = true
    },
    search (e) {
      if (this.custom) {
        this.$emit('change', e.detail.value)
        return
      }
      this.$u.route('/pages/search/search', {
        keyword: e.detail.value
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  font-size: $uni-font-size-base;
  background: #fff;

  .content {
    display: flex;
    align-items: center;
    width: 100%;
    height: 70rpx;
    background-color: #f2f2f2;
    overflow: hidden;
    // transition: all 0.2s linear;
    border-radius: 10rpx;
    padding: 0 30rpx;
    .select {
      width: 185rpx;
      height: 60rpx;
      line-height: 60rpx;
    }

    .content-box {
      width: 100%;
      display: flex;
      align-items: center;

      &.center {
        justify-content: center;
      }

      .input {
        width: 100%;
        max-width: 100%;
        line-height: 60rpx;
        font-size: 30rpx;
        height: 60rpx;
        background-color: #f2f2f2;
        // transition: all 0.2s linear;
        // padding-left: 50rpx;
        // &.center {
        // 	width: 250rpx;
        // }

        // &.sub {
        // 	width: auto;
        // 	color: grey;
        // }
      }
    }
  }
}
</style>
